import { Button, Form, Input } from 'antd'
import React, { PureComponent } from 'react'
import { connect, history } from '@umijs/max'
import styles from './index.less'
import { logout } from '@/api/global'
import JSEncrypt from '@/utils/JSEncrypt.js'
import { saveUserInfo, updatePassword } from './api'

@connect(({ global }) => ({ ...global }))
export default class UserModel extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      userdisabled: true,
      passdisabled: true,
      user: {},
    }

    this.form = React.createRef()
    this.passForm = React.createRef()
  }

  componentDidMount() {
    const { users } = this.props
    this.init(users)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.users !== this.props.users) {
      this.init(nextProps.users)
    }
  }

  init = (users) => {
    if (users) {
      const data = { ...users }
      // data.oldPassword = data.password ? JSEncrypt(data.password, true) : data.password
      this.setState({
        user: data,
      })
      this.form.current.setFieldsValue({
        id: data.id,
        name: data.displayName,
        phone: data.phoneNumber,
        email: data.email,
        // dept: data.dept,
        // title: data.title,
      })
      // this.passForm.current.setFieldsValue({
      //   oldPassword: data.oldPassword,
      // })
    }
  }

  userdisabledFn = () => {
    const { user } = this.state
    this.form.current.setFieldsValue({
      id: user.id,
      name: user.displayName,
      phone: user.phoneNumber,
      email: user.email,
      // dept: user.dept,
      // title: user.title,
    })
    this.setState({ userdisabled: true })
  }

  passdisabledFn = () => {
    const { user } = this.state
    this.setState({ passdisabled: true }, () => {
      this.passForm.current.setFieldsValue({
        oldPassword: user.oldPassword,
      })
    })
  }

  usersave = () => {
    const { user } = this.state
    this.form.current.validateFields().then((values) => {
      saveUserInfo({ id: user.id, ...values }).then((res) => {
        if (res) {
          this.setState({
            user: { ...user, ...values },
            userdisabled: true,
          })
          this.props.dispatch({ type: 'global/getUser' })
        }
      })
    })
  }

  passsave = () => {
    const { user } = this.state
    this.passForm.current.validateFields().then((values) => {
      updatePassword({ id: user.id, oldPassword: JSEncrypt(values.oldPassword), password: JSEncrypt(values.password) }).then((res) => {
        if (res) {
          this.setState({
            user: { ...user, ...{ oldPassword: values.password } },
            passdisabled: true,
          })
        }
      })
    })
  }

  render() {
    const { userdisabled } = this.state
    return (
      <div className={styles.user_model}>
        <div className={styles.user_model_form}>
          {/* <div className={styles.user_model_title}><span>基础信息</span>{userdisabled ? <Button type="link" onClick={() => { this.setState({ userdisabled: false }) }}> 修改基础信息 </Button> : <span><Button style={{ marginRight: '16px' }} onClick={this.userdisabledFn}>取消</Button><Button onClick={this.usersave} type="primary">保存</Button></span>}</div> */}
          <Form ref={this.form} name="nest-messages">
          <Form.Item name="id" label="用户名" rules={[{ required: true, message: '用户名' }]}>
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item>
            <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item>
            <Form.Item name="phone" label="手机号" rules={[{ required: true, message: '请输入手机号' }]}>
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item>
            <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email' }]}>
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item>
            {/* <Form.Item name="dept" label="部门">
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item>
            <Form.Item name="title" label="职位">
              <Input disabled={userdisabled} bordered={!userdisabled} />
            </Form.Item> */}
          </Form>
          {/* <div className={styles.user_model_title}><span>密码信息</span>{passdisabled ? (
            <Button
              type="link"
              onClick={() => {
                this.setState({ passdisabled: false }, () => {
                  this.passForm.current.setFieldsValue({
                    oldPassword: undefined,
                    newPassword: undefined,
                    password: undefined,
                  })
                })
              }
            }
            >
              修改密码
            </Button>
          ) : <span><Button style={{ marginRight: '16px' }} onClick={this.passdisabledFn}>取消</Button><Button onClick={this.passsave} type="primary">保存</Button></span>}
          </div>
          <Form ref={this.passForm} name="nest-messages">
            {!passdisabled ? (
              <div>
                <Form.Item name="oldPassword" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
                  <Input.Password disabled={passdisabled} placeholder="请输入密码" />
                </Form.Item>
                <Form.Item name="newPassword" label="新密码" rules={[{ required: true, message: '请输入新密码' }]}>
                  <Input.Password password disabled={passdisabled} placeholder="请输入新密码" />
                </Form.Item>
                <Form.Item
                  name="password"
                  label="再次确认密码"
                  rules={[
                    { required: true, message: '请输入确认密码' },
                    ({ getFieldValue }) => ({
                      validator(_, value) {
                        if (!value || getFieldValue('newPassword') === value) {
                          return Promise.resolve()
                        }
                        return Promise.reject(new Error('两次密码有误'))
                      },
                    }),
                  ]}
                >
                  <Input.Password password disabled={passdisabled} placeholder="请输入密码" />
                </Form.Item>
              </div>
            ) : (
              <Form.Item initialValue="******" label="密码" required name="showPassword">
                <Input.Password disabled placeholder="请输入密码" visibilityToggle={false} bordered={!passdisabled} />
              </Form.Item>
            )}

          </Form> */}

          <div>
            {/* <Button
              type="primary"
              onClick={() => {
                logout().then((res) => {
                  if (res) {
                    history.push('/login')
                  }
                })
              }}
              danger
              ghost
            >退出登录
            </Button> */}
          </div>
        </div>
      </div>
    )
  }
}
